<script setup lang="ts">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { transformI18n } from "@/plugins/i18n";
import { IconSelect } from "@/components/ReIcon";
import Segmented from "@/components/ReSegmented";
import {
  menuTypeOptions,
  httpMethodsOptions,
  keepAliveOptions
} from "./utils/enums";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    higherMenuOptions: [],
    higherHttpMethodsOptions: [],
    id: null,
    menuId: null,
    parentId: null,
    name: null,
    path: null,
    redirect: null,
    component: null,
    code: null,
    url: null,
    httpMethods: null,
    menuType: null,
    meta: null,
    /** meta */
    title: null,
    icon: null,
    active: null,
    color: null,
    type: null,
    fullpage: null,
    hidden: false,
    hiddenBreadcrumb: false,
    tag: null,
    rank: 1
  })
});

const httpMethodsValue = ref(4);
const menuTypeValue = ref(4);
const hiddenValue = ref(4);
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const getMenuTypeValue = type => {
  switch (type) {
    case "Menu":
      return 0;
    case "Iframe":
      return 1;
    case "Link":
      return 2;
    case "Button":
      return 3;
    default:
      return 0;
  }
};

const getMenuTypeLable = type => {
  switch (type) {
    case "菜单":
      return "Menu";
    case "Iframe":
      return "Iframe";
    case "外链":
      return "Link";
    case "按钮":
      return "Button";
  }
};

const getHttpMethodsValue = type => {
  switch (type) {
    case "GET":
      return 0;
    case "POST":
      return 1;
    case "PUT":
      return 2;
    case "DELETE":
      return 3;
    default:
      return 0;
  }
};

const getHiddenValue = type => {
  switch (type) {
    case false:
      return 0;
    case true:
      return 1;
    default:
      return 0;
  }
};

onMounted(() => {
  menuTypeValue.value = getMenuTypeValue(newFormInline.value?.meta?.type);
  httpMethodsValue.value = getHttpMethodsValue(
    newFormInline.value?.httpMethods
  );

  hiddenValue.value = getHiddenValue(newFormInline.value?.meta?.hidden);
  if (hiddenValue.value === 0) {
    onChangeHidden();
  }
  if (menuTypeValue.value === 0) {
    onChangeMenuType();
  }
  if (httpMethodsValue.value === 0) {
    onChange();
  }
});

function onChange() {
  const selectedValue = httpMethodsValue.value;
  const httpMethods = httpMethodsOptions[selectedValue]?.label;
  newFormInline.value.httpMethods = httpMethods as string;
}

function onChangeMenuType() {
  const selectedValue = menuTypeValue.value;
  const menuType = menuTypeOptions[selectedValue]?.label;
  newFormInline.value.menuType = getMenuTypeLable(menuType);
}

function onChangeHidden() {
  newFormInline.value.hidden = hiddenValue.value == 0 ? false : true;
  newFormInline.value.meta.hidden = newFormInline.value?.hidden ?? false;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col>
        <el-form-item label="菜单类型">
          <Segmented
            v-model="menuTypeValue"
            :options="menuTypeOptions"
            @change="onChangeMenuType"
          />
        </el-form-item>
      </re-col>

      <re-col>
        <el-form-item label="上级菜单">
          <el-cascader
            v-model="newFormInline.parentId"
            class="w-full"
            :options="newFormInline.higherMenuOptions"
            :props="{
              value: 'menuId',
              label: 'title',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            filterable
            placeholder="请选择上级菜单"
          >
            <template #default="{ node, data }">
              <span>{{ transformI18n(data?.meta?.title) }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单名称" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入菜单名称"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="menuTypeValue !== 3" :value="12" :xs="24" :sm="24">
        <el-form-item label="路由名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入路由名称"
          />
        </el-form-item>
      </re-col>

      <re-col v-if="menuTypeValue !== 3" :value="12" :xs="24" :sm="24">
        <el-form-item label="路由路径" prop="path">
          <el-input
            v-model="newFormInline.path"
            clearable
            placeholder="请输入路由路径"
          />
        </el-form-item>
      </re-col>
      <re-col v-show="menuTypeValue === 0" :value="12" :xs="24" :sm="24">
        <el-form-item label="组件路径">
          <el-input
            v-model="newFormInline.component"
            clearable
            placeholder="请输入组件路径"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单排序">
          <el-input-number
            v-model="newFormInline.rank"
            class="!w-full"
            :min="1"
            :max="9999"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col v-show="menuTypeValue === 0" :value="12" :xs="24" :sm="24">
        <el-form-item label="路由重定向">
          <el-input
            v-model="newFormInline.redirect"
            clearable
            placeholder="请输入默认跳转地址"
          />
        </el-form-item>
      </re-col>

      <re-col v-show="menuTypeValue !== 3" :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单图标">
          <IconSelect v-model="newFormInline.icon" class="w-full" />
        </el-form-item>
      </re-col>
      <re-col v-show="menuTypeValue !== 3" :value="12" :xs="24" :sm="24">
        <el-form-item label="隐藏">
          <Segmented
            v-model="hiddenValue"
            :options="keepAliveOptions"
            @change="onChangeHidden"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="menuTypeValue === 3" :value="12" :xs="24" :sm="24">
        <!-- 按钮级别权限设置 -->
        <el-form-item label="权限标识" prop="code">
          <el-input
            v-model="newFormInline.code"
            clearable
            placeholder="请输入权限标识"
          />
        </el-form-item>
      </re-col>

      <re-col v-show="menuTypeValue === 3" :value="12" :xs="24" :sm="24">
        <el-form-item label="接口地址">
          <el-input
            v-model="newFormInline.url"
            clearable
            placeholder="请输入 按钮 接口地址"
          />
        </el-form-item>
      </re-col>

      <re-col v-show="menuTypeValue === 1" :value="12" :xs="24" :sm="24">
        <!-- iframe -->
        <el-form-item label="链接地址">
          <el-input
            v-model="newFormInline.url"
            clearable
            placeholder="请输入 iframe 链接地址"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="请求方法" v-if="menuTypeValue === 3">
          <Segmented
            v-model="httpMethodsValue"
            :options="httpMethodsOptions"
            @change="onChange"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
